<template>
  <!-- 公共厕所 -->
  <div class="content-grid">
    <panelBox title="所有权归属">
      <v-chart class="chart" :option="option1" autoresize />
    </panelBox>
    <panelBox title="运营单位" style="grid-area: 1 / 3 / 3 / 3">
      <v-chart class="chart" :option="option4" autoresize />
    </panelBox>
    <panelBox title="压缩机类型">
      <v-chart class="chart" :option="option2" autoresize />
    </panelBox>
    <div id="map-box" class="map-box" style="grid-area: 1 / 2 / 4 / 3"></div>
    <panelBox title="吨位">
      <v-chart class="chart" :option="option3" autoresize />
    </panelBox>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import panelBox from "./components/panel-box.vue";
import { garbageStationsStatistics } from "@/api/garbage_stations";
const configListData = ref([]);
const ListData = ref([]);
const is_cli_map = ref(0);
let map;
defineOptions({
  name: "GarbageStation",
});
const props = defineProps({
  streetId: {
    type: Number,
    default: null,
  },
});
const module_3 = ref([]);
onMounted(() => {
  getData(props.streetId);
});

const map_init = () => {
  map = new BMapGL.Map("map-box");
  var point = new BMapGL.Point(
    configListData.value[0].map_center_longitude,
    configListData.value[0].map_center_latitude
  );
  map.centerAndZoom(point, configListData.value[0].map_default_zoom);
  map.enableScrollWheelZoom(true);
  map.clearOverlays();
  var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
  map.addControl(scaleCtrl);
  var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
  map.addControl(zoomCtrl);

  let list = ListData.value;
  for (var i = 0; i < list.length; i++) {
    // 使用立即执行函数创建闭包，避免循环变量引用问题
    (function(item, index) {
      // 创建当前标记的坐标点
      const currentPoint = new BMapGL.Point(item.longitude, item.latitude);
      
      // 创建自定义图标
      let img = "";
      if (item.attribute == "正式") {
        img = "zhengchang.png";
      } else {
        img = "guihua.png";
      }
      var marker = new BMapGL.Marker(currentPoint);
      map.addOverlay(marker);
      
      // 创建信息窗口内容
      var opts = {
        width: 250,
        height: 80,
        offset: new BMapGL.Size(0, -30) // 向上偏移，避免被标记遮挡
      };
      var infoContent = `<div style="padding: 5px;font-size:18px;">${item.name || '未知'}</div>`;
      var infoWindow = new BMapGL.InfoWindow(infoContent, opts);
      
      // 添加点击事件，使用闭包中的currentPoint
      marker.addEventListener('click', function () {
        map.openInfoWindow(infoWindow, currentPoint);
      });
    })(list[i], i);
  }
};
const getData = async (id = null) => {
  let res = await garbageStationsStatistics({ street_id: id });
  console.log(res);
  if (res.code == 0) {
    handleData1(res.data.module_1);
    handleData4(res.data.module_4);
    handleData2(res.data.module_2);
    handleData3(res.data.module_3);

    ListData.value = res.data.map || [];
    configListData.value = res.config || [];
    map_init();
  }
};
const handleData1 = (data) => {
  option1.value.legend.data = data.map((item) => item.name);
  option1.value.series[0].data = data.map((item) => {
    return {
      value: item.count,
      name: item.name,
      itemStyle: {
        color: item.color,
      },
    };
  });
};
const handleData3 = (data) => {
  option3.value.legend.data = data.map((item) => item.name + "吨");
  option3.value.series[0].data = data.map((item) => {
    return {
      value: item.count,
      name: item.name + "吨",
      itemStyle: {
        color: item.color,
      },
    };
  });
};

const handleData4 = (data) => {
  option4.value.legend.data = data.map((item) => item.name);
  option4.value.series[0].data = data.map((item) => {
    return {
      value: item.count,
      name: item.name,
      itemStyle: {
        color: item.color,
      },
    };
  });
};

const handleData2 = (data) => {
  option2.value.xAxis[0].data = data.map((item) => item.name);
  option2.value.series[0].data = data.map((item) => {
    return {
      value: item.count,
      name: item.name,
      label: {
        show: true,
        position: "top",
        color: item.color,
        fontSize: 18,
      },
      itemStyle: {
        color: item.color,
      },
    };
  });
};

// 测试饼图
const option1 = ref({
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)",
  },
  legend: {
    orient: "vertical",
    right: "20",
    data: [],
    textStyle: {
      color: "#fff",
      fontWeight: "bold",
    },
  },
  series: [
    {
      name: "所在位置",
      type: "pie",
      radius: ["40%", "70%"],
      center: ["40%", "50%"], // 环形图中心位置
      data: [1, 2, 3],
      label: {
        formatter: "{c}个",
        color: "#fff",
        fontWeight: "bold",
      },
      emphasis: {
        itemStyle: {},
      },
    },
  ],
});
// 测试饼图
const option4 = ref({
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)",
  },
  legend: {
    bottom: "30",
    data: [],
    textStyle: {
      color: "#fff",
      fontWeight: "bold",
    },
  },
  series: [
    {
      name: "所在位置",
      type: "pie",
      radius: "60%",
      center: ["50%", "40%"], // 环形图中心位置
      data: [1, 2, 3],
      label: {
        formatter: "{c}个",
        color: "#fff",
        fontWeight: "bold",
      },
      emphasis: {
        itemStyle: {},
      },
    },
  ],
});
const option3 = ref({
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)",
  },
  legend: {
    orient: "vertical",
    right: "20",
    data: [],
    textStyle: {
      color: "#fff",
      fontWeight: "bold",
    },
  },
  series: [
    {
      name: "所在位置",
      type: "pie",
      radius: "70%",
      center: ["40%", "40%"], // 环形图中心位置
      data: [1, 2, 3],
      label: {
        formatter: "{c}个",
        color: "#fff",
        fontWeight: "bold",
      },
      emphasis: {
        itemStyle: {},
      },
    },
  ],
});
const option2 = ref({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    textStyle: {
      color: "#fff",
      fontWeight: "bold",
    },
  },
  xAxis: [
    {
      type: "category",
      axisLabel: {
        color: "#fff",
        fontWeight: "bold",
      },
      data: [],
    },
  ],
  yAxis: [
    {
      type: "value",
      splitNumber: 3,
      axisLabel: {
        color: "#fff",
        fontWeight: "bold",
        formatter: "{value}个",
      },
    },
  ],
  series: [
    {
      name: "",
      type: "bar",
      barMaxWidth: 60,
      emphasis: {
        focus: "series",
      },
      data: [],
      label: {
        formatter: "{c}个",
        color: "#fff",
        fontWeight: "bold",
      },
    },
  ],
});

defineExpose({
  getData,
});
</script>
<style lang="scss" scoped>
@use "./index.scss" as *;
#map-box {
  height: 100%;
  width: 100%;
}

.pie-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  .pie-box-item {
    width: 32%;
    height: 100%;
    position: relative;
    .chart-title {
      position: absolute;
      bottom: 20px;
      width: 100%;
      text-align: center;
      left: -50px;
      font-size: 14px;
      color: #82a9d7;
    }
  }
}
</style>
